<template>
  <div class="meta_data">
    <el-form label-width="25px" :model="formInline" size="mini">
      <div class="push_button">
        <el-form-item label="键:" style="width: 40%">
          <el-input placeholder="请输入键" v-model="formInline.date"></el-input>
        </el-form-item>

        <el-form-item label="值:" style="width: 40%">
          <el-input placeholder="请输入值" v-model="formInline.name"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="metaDataSubmit"
            style="background: #2680d2"
            >添加</el-button
          >
        </el-form-item>
      </div>
    </el-form>

    <el-table
      :data="metaData"
      max-height="320px"
      style="width: 100%"
      :header-cell-style="{ background: '#FAFAFA', color: '#333333' }"
    >
      <el-table-column prop="metaname" label="键"> </el-table-column>
      <el-table-column prop="metatext" label="值"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, metaData)"
            type="text"
            icon="el-icon-delete"
            style="color: #ff4d4f"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: ["editmetaData", "isedit"],
  data() {
    return {
      checked: true,
      checked1: true,
      metaData: [],
      formInline: { date: "", name: "" },
      metaDataJson: {},
    };
  },
  mounted() {
    // if (this.isedit) {
    //   this.getmetaData();
    // }
  },
  watch: {
    isedit: {
      //监听的对象
      deep: true, //深度监听设置为 true
      immediate: true,
      handler: function (newV, oldV) {
        if (this.isedit) {
          this.getmetaData();
        }
      },
    },
  },
  methods: {
    clearMeteDada() {
      this.metaData = [];
      this.formInline = { date: "", name: "" };
    },
    getmetaData() {
      var that = this;
      var t;
      clearTimeout(t);
      t = setTimeout(function () {
        for (const key in that.editmetaData) {
          that.metaData.push({
            metaname: key,
            metatext: that.editmetaData[key],
          });
        }
        that.metaDataJson = that.editmetaData;
      }, 1000);
    },
    deleteRow(index, rows) {
      var id = rows[index].metaname;
      for (var n in this.metaDataJson) {
        if (id === n) {
          delete this.metaDataJson[n];
        }
      }
      rows.splice(index, 1);
    },
    // 增加新数据
    metaDataSubmit() {
      if (this.formInline.date == "" || this.formInline.name == "") {
        return false;
      }
      this.metaData.unshift({
        metaname: this.formInline.date,
        metatext: this.formInline.name,
      });
      // 添加完数据还要重新排一下自增id
      for (let i = 0; i < this.metaData.length; i++) {
        this.metaData[i].zizengId = i;
        if (!this.metaDataJson.hasOwnProperty(this.metaData[i].metaname)) {
          this.metaDataJson[this.metaData[i].metaname] =
            this.metaData[i].metatext;
        } else {
          this.metaDataJson[this.metaData[i].metaname] =
            this.metaData[i].metatext;
        }
      }
      this.formInline = { date: "", name: "" };
      this.$emit("sendmetaDatas", this.metaDataJson);
    },
  },
};
</script>

<style scoped>
.meta_data /deep/ .el-table th,
.el-table tr {
  background-color: #fafafa;
}
.meta_data /deep/ .el-table__row {
  cursor: pointer;
}
.push_button {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-left: 10px;
}
/* /deep/ .el-col-9 {
  margin-left: -4.5px;
  width: 38%;
} */
</style>
